<template>
  <!-- 购物车订单头部 -->
  <div class="shopcart-header">
    <div class="shopcart-header-container">
      <div class="shopcart-header-left">
        <div class="image">
          <router-link to="/home">
            <img
              src="https://s02.mifile.cn/assets/static/image/logo-mi2.png"
              alt=""
            />
          </router-link>
        </div>
        <div class="left-content">
          <span class="title" v-if="$route.meta.isShopCart === 1">我的购物车</span>
          <span class="title" v-else-if="$route.meta.isShopCart === 2">确认订单</span>
          <span class="title" v-else>支付订单</span>
          <span v-if="$route.meta.isShopCart === 1" >温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
        </div>
      </div>
      <div class="shopcart-header-right">
        <el-dropdown>
          <span class="el-dropdown-link">
            Errors_404<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>评论晒图</el-dropdown-item>
            <el-dropdown-item>我的喜欢</el-dropdown-item>
            <el-dropdown-item>小米账户</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="line"> | </span>我的订单
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.shopcart-header {
  width: 100%;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #ff6700;
  .shopcart-header-container {
    width: 1226px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .shopcart-header-left {
      display: flex;
      .image {
        img {
          width: 48px;
          height: 48px;
        }
      }
      .title {
        font-size: 28px;
        padding: 0 20px 0 40px;
      }
    }
    .shopcart-header-right {
      .line {
        padding: 0 10px;
      }
    }
  }
}
</style>
